








<!--<script setup>-->
<!--import { ref } from 'vue';-->

<!--const to = '/pages/work1/end3.2.2';-->
<!--const schoolList = ref(['武汉一中', '武汉二中', '武汉三中']); // 学校列表-->
<!--const selectedSchool = ref(''); // 当前选择的学校-->
<!--const showSchoolDropdown = ref(false); // 是否显示下拉框-->

<!--const toNext = (target) => {-->
<!--  if (selectedSchool.value) {-->
<!--    uni.navigateTo({-->
<!--      url: target-->
<!--    });-->
<!--  } else {-->
<!--    uni.showToast({-->
<!--      title: '请选择中学',-->
<!--      icon: 'none'-->
<!--    });-->
<!--  }-->
<!--};-->

<!--// 选择学校-->
<!--const selectSchool = (school) => {-->
<!--  selectedSchool.value = school;-->
<!--  showSchoolDropdown.value = false;-->
<!--};-->
<!--</script>-->

<!--<template>-->
<!--  <view class="container">-->
<!--    <view class="header">-->
<!--      <text class="title">创建队伍</text>-->
<!--    </view>-->
<!--    <view class="form-container">-->
<!--      <view class="form-item">-->
<!--        <text class="label">选择中学</text>-->
<!--        <view class="input-container" @click="showSchoolDropdown =!showSchoolDropdown">-->
<!--          <input type="text" :value="selectedSchool" placeholder="请选择中学" class="input" readonly></input>-->
<!--          <image src="/static/image/xl.png" class="xl"></image>-->
<!--        </view>-->
<!--        <view v-if="showSchoolDropdown" class="dropdown-list">-->
<!--          <view v-for="(school, index) in schoolList" :key="index" class="dropdown-item" @click="selectSchool(school)">-->
<!--            {{school}}-->
<!--          </view>-->
<!--        </view>-->
<!--        <text class="hint">一个中学允许存在多个队伍</text>-->
<!--      </view>-->
<!--      <view class="form-item">-->
<!--        <text class="label">队伍名称</text>-->
<!--        <view class="input-container">-->
<!--          <input type="text" v-model="teamName" placeholder="请输入队伍名称" class="input"></input>-->
<!--          <image src="/static/image/xl.png" class="xl"></image>-->
<!--        </view>-->
<!--        <text class="hint">队伍名称唯一</text>-->
<!--      </view>-->
<!--      <button class="create-button" v-if="flag" {@click="toNext(to)"} v-else-if="!flag" {@click="toNext2(to2)"}>成为队长</button>-->

<!--    </view>-->
<!--    <view class="rules-container">-->
<!--      <text class="rules-title">1、队伍名称进行重名验证、队伍名称组成为</text>-->
<!--      <br>-->
<!--      <text class="rules-content">“校名+自定义部分”，如“武汉一中队”</text>-->

<!--      <br>-->
<!--      <text class="rules-title">2、成功组建队伍需要过招办审批。</text>-->

<!--      <br>-->
<!--      <text class="rules-title">3、批次结束自动结算队伍资料，可从“历史队伍”中查看。</text>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->

<!--<style scoped>-->
<!--.xl {-->
<!--  width: 16px;-->
<!--  height: 16px;-->
<!--}-->

<!--.container {-->
<!--  background-color: #F5F5F5;-->
<!--  padding: 10px;-->
<!--}-->

<!--.header {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 15px;-->
<!--}-->

<!--.title {-->
<!--  font-weight: 500;-->
<!--  font-size: 16px;-->
<!--  color: #333333;-->
<!--  margin-left: 85px;-->
<!--}-->

<!--.form-container {-->
<!--  background-color: #fff;-->
<!--  padding: 15px;-->
<!--  border-radius: 5px;-->
<!--}-->

<!--.form-item {-->
<!--  margin-bottom: 15px;-->
<!--}-->

<!--.label {-->
<!--  display: block;-->
<!--  margin-bottom: 5px;-->
<!--  font-size: 14px;-->
<!--  color: #333;-->
<!--}-->

<!--.input-container {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  border: 1px solid #ccc;-->
<!--  padding: 8px;-->
<!--  border-radius: 4px;-->
<!--}-->

<!--.input {-->
<!--  flex: 1;-->
<!--  border: none;-->
<!--  outline: none;-->
<!--}-->

<!--.dropdown-list {-->
<!--  position: absolute;-->
<!--  background-color: #fff;-->
<!--  border: 1px solid #ccc;-->
<!--  width: 100%;-->
<!--  max-height: 150px;-->
<!--  overflow-y: auto;-->
<!--  z-index: 100;-->
<!--}-->

<!--.dropdown-item {-->
<!--  padding: 8px;-->
<!--  border-bottom: 1px solid #eee;-->
<!--}-->

<!--.hint {-->
<!--  font-size: 12px;-->
<!--  color: #999;-->
<!--  margin-top: 5px;-->
<!--}-->

<!--.create-button {-->
<!--  width: 100%;-->
<!--  background-color: #007AFF;-->
<!--  color: #fff;-->
<!--  padding: 10px;-->
<!--  border-radius: 4px;-->
<!--  text-align: center;-->
<!--  margin-top: 15px;-->
<!--}-->

<!--.rules-container {-->
<!--  margin-top: 15px;-->
<!--  padding: 10px;-->
<!--  background-color: #FFF9E6;-->
<!--  border-radius: 4px;-->
<!--}-->

<!--.rules-title,-->
<!--.rules-content {-->
<!--  font-size: 12px;-->
<!--  color: #FF9900;-->
<!--}-->
<!--</style>-->



























<script setup>
import { ref } from 'vue';

const toSuccess = '/pages/work1/end3.2.2?type=true';
const toFail = '/pages/work1/nopath3.2.4?type=false';
const schoolList = ref(['武汉一中', '武汉二中', '武汉三中']); // 学校列表
const selectedSchool = ref(''); // 当前选择的学校
const showSchoolDropdown = ref(false); // 是否显示下拉框
const teamName = ref(''); // 队伍名称

const toNext = () => {
  if (!selectedSchool.value) {
    uni.showToast({
      title: '请选择中学',
      icon: 'none'
    });
    return;
  }
  if (!teamName.value) {
    uni.showToast({
      title: '请输入队伍名称',
      icon: 'none'
    });
    return;
  }
  if (selectedSchool.value === '武汉三中') {
    uni.navigateTo({
      url: toFail
    });
  } else {
    uni.navigateTo({
      url: toSuccess
    });
  }
};

// 选择学校
const selectSchool = (school) => {
  selectedSchool.value = school;
  showSchoolDropdown.value = false;
};
</script>

<template>
  <view class="container">
    <view class="header">
      <text class="title">创建队伍</text>
    </view>
    <view class="form-container">
      <view class="form-item">
        <text class="label">选择中学</text>
        <view class="input-container" @click="showSchoolDropdown =!showSchoolDropdown">
          <input type="text" :value="selectedSchool" placeholder="请选择中学" class="input" readonly></input>
          <image src="/static/image/xl.png" class="xl"></image>
        </view>
        <view v-if="showSchoolDropdown" class="dropdown-list">
          <view v-for="(school, index) in schoolList" :key="index" class="dropdown-item" @click="selectSchool(school)">
            {{school}}
          </view>
        </view>
        <text class="hint">一个中学允许存在多个队伍</text>
      </view>
      <view class="form-item">
        <text class="label">队伍名称</text>
        <view class="input-container">
          <input type="text" v-model="teamName" placeholder="请输入队伍名称" class="input"></input>
          <image src="/static/image/xl.png" class="xl"></image>
        </view>
        <text class="hint">队伍名称唯一</text>
      </view>
      <button class="create-button" @click="toNext">
        成为队长
      </button>
    </view>
    <view class="rules-container">
      <text class="rules-title">1、队伍名称进行重名验证、队伍名称组成为</text>
      <text class="rules-content">"校名+自定义部分"，如"武汉一中队"</text>
      <text class="rules-title">2、成功组建队伍需要过招办审批。</text>
      <text class="rules-title">3、批次结束自动结算队伍资料，可从"历史队伍"中查看。</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  padding: 15px;
  background-color: #fff;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.form-container {
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 15px;
}

.label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.input-container {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
}

.input {
  flex: 1;
  border: none;
  outline: none;
}

.xl {
  width: 16px;
  height: 16px;
}

.dropdown-list {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  z-index: 100;
}

.dropdown-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #999;
}

.create-button {
  background-color: #007AFF;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 4px;
  text-align: center;
}

.rules-container {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.rules-title {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: #666;
}

.rules-content {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: #333;
}
</style>